<template>
  <div class="upgrade">
    <div class="upgrade-title">
      {{ $t("How to upgrade") }}
    </div>
    <div class="upgrade-title2">
      {{ $t("Pick one of two") }}
    </div>
    <div class="upgrade-menu">
      <div class="upgrade-menu-cell">
        <img
          src="../../../assets/images/vip/vip_friend.png"
          class="upgrade-menu-cell-icon"
        />
        <img
          src="../../../assets/images/vip/vip_stage.png"
          class="upgrade-menu-cell-stage"
        />
        <span class="upgrade-menu-cell-msg">
          {{ $t("Invite friends") }}:
          <span class="upgrade-menu-cell-msg2">≥ {{personLimit}}</span>
        </span>
        <span class="upgrade-menu-cell-msg mb8">
          {{ $t("Invite No") }}:
          <span class="upgrade-menu-cell-msg2">{{ invitedPerson }}</span>
        </span>
      </div>
      <div class="upgrade-menu-cell">
        <img
          src="../../../assets/images/vip/vip_gold.png"
          class="upgrade-menu-cell-icon"
        />
        <img
          src="../../../assets/images/vip/vip_stage.png"
          class="upgrade-menu-cell-stage"
        />
        <span class="upgrade-menu-cell-msg x aic">
          {{ $t("Total") }}:
          <img src="../../../assets/images/icon_coin.svg" class="icon_coin" />
          <span class="upgrade-menu-cell-msg2">{{incomeLimit}}</span>
        </span>
        <span class="upgrade-menu-cell-msg mb8 x aic">
          {{ $t("my") }}:
          <img src="../../../assets/images/icon_coin.svg" class="icon_coin" />
          <span class="upgrade-menu-cell-msg2">{{
            inviteIncome
          }}</span>
        </span>
      </div>
    </div>
    <div class="upgrade-btn" @click="toInvite">
      {{ $t("to invite") }}
    </div>
  </div>
</template>

<script>
import { onMounted, inject, reactive, toRefs } from "vue";
import {  UserApi } from "@@/api/api.js";
import { useRouter } from "vue-router";
export default {
  setup() {
    const vueState = inject("vueState");
    const router = useRouter();
    const data = reactive({
      inviteIncome: 0,
      invitedPerson: 0,
      personLimit:0,
      incomeLimit:0
    });
    const getData = async () => {
      try {
        const res = await UserApi.VipLimitInfo()
        data.inviteIncome = res.coinTotal;
        data.invitedPerson = res.inviteCount
        data.personLimit = res.inviteLimit
        data.incomeLimit = res.coinLimit
      } catch (e) {
        console.log(e);
      }
    };
    onMounted(() => {
      vueState.EventEmitter.immediately(
        "afterRegist",
        getData,
        vueState.pageStatus.afterRegist
      );
    });
    const toInvite = () => {
      window.trackEvent({ pageTitle: "Memberpage", ev: "clickInviteButton" });
      router.push({ name: "invite" });
    };
    return {
      vueState,
      ...toRefs(data),
      toInvite,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../class.less";
.upgrade {
  background-image: url("../../../assets/images/vip/vip_upgrade.png");
  background-repeat: no-repeat;
  background-size: contain;
  height: 4.07rem;
  padding-top: 0.24rem;
  .y;
  .aic;
  &-title {
    font-size: 0.24rem;
    font-weight: 700;
    line-height: 0.32rem;
    letter-spacing: 0px;
    background: linear-gradient(90deg, #ffefc5 0%, #ffd57e 100%);
    background-clip: text;
    color: transparent;
  }
  &-title2 {
    font-size: 0.16rem;
    font-weight: 400;
    color: rgba(224, 210, 178, 0.43);
    line-height: 0.28rem;
    letter-spacing: 0px;
  }
  &-menu {
    padding: 0.33rem 0 0.16rem;
    width: 100%;
    .x3;
    &-cell {
      flex: 1;
      .y;
      .aic;
      &-icon {
        width: 0.92rem;
        height: 0.92rem;
        z-index: 1;
      }
      &-stage {
        width: 1.16rem;
        height: 1.04rem;
        margin-top: -0.5rem;
      }
      &-msg {
        font-size: 0.14rem;
        font-weight: 700;
        color: #e6e0d7;
        line-height: 0.24rem;
        letter-spacing: 0px;
      }
      &-msg2 {
        font-size: 0.14rem;
        font-weight: 700;
        color: #ffdb8b;
        line-height: 0.24rem;
        letter-spacing: 0px;
      }
      .icon_coin {
        width: 0.2rem;
        height: 0.2rem;
        margin-left: 0.04rem;
        margin-right: 0.02rem;
      }
    }
  }
  &-btn {
    width: 1.16rem;
    height: 0.43rem;
    font-weight: 700;
    background: linear-gradient(90deg, #efc897, #ebcfa2 100%);
    border-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.29),
        rgba(254, 255, 228, 0.08) 100%
      )
      0.5 0.5;
    border-radius: 0.215rem;
    color: #744a17;
    font-size: 0.16rem;
    .x1;
    .aic;
  }
}
</style>
